<script setup lang="ts">
import { getCurrentInstance, reactive, ref, toRaw } from "vue";
import { onLoad, onShow, onUnload } from "@dcloudio/uni-app";
import {
  user_info_api,
  edit_config_api,
  edit_api,
} from "@/package/my/api/guide_certification";
import { upload_up } from "@/api/upload";
import { chooseMedia } from "@/utils/meida";
import { AppData } from "@/utils/app";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import FormButton from "@/components/form/button.vue";
import InfoEditForm from "./components/info-edit-form.vue";
import InfoMultiplePicker from "./components/info-multiple-picker.vue";

onLoad(() => {
  user_info_api().then((resp) => {
    formData.avatar_url = resp.avatar_url;
    formData.show_name_type = resp.show_name_type;
    formData.fullname = resp.fullname;
    formData.nickname = resp.nickname;
    formData.emergency_telephone = resp.emergency_telephone;
    formData.area_id_arr = resp.area_id_arr;
    infoData.area_name_arr = resp.area_name_arr;
    formData.language_arr = resp.language_arr;
    formData.credential_arr = resp.credential_arr;
    formData.tag_arr = resp.tag_arr;
    formData.scenic_id_arr = resp.scenic_id_arr;
    infoData.scenic_name_arr = resp.scenic_name_arr;
    formData.guide_height = resp.guide_height;
    formData.guide_weight = resp.guide_weight;
    formData.guider_tips = resp.guider_tips;
    formData.good_at = resp.good_at;
  });

  edit_config_api().then((resp) => {
    tempData.areaList = resp.area.map((i) => {
      return { id: i.id, name: i.name, list: i.city_list };
    });
    tempData.languageList = [resp.language, []];
    tempData.certificateList = [
      resp.credential.credential,
      resp.credential.level,
      [],
    ];
    tempData.tagList = [resp.tag.good, resp.tag.other, []];
    tempData.scenicList = resp.scenic.map((i) => {
      return { id: i.id, name: i.name, list: i.scenic_list };
    });
  });

  eventChannel = (
    getCurrentInstance()?.proxy as any
  ).getOpenerEventChannel() as UniApp.EventChannel;
});
onUnload(() => eventChannel?.emit("ev-info-edit", ""));

const formData = reactive({
  avatar_url: "",
  show_name_type: 1,
  fullname: "",
  nickname: "",
  emergency_telephone: "",
  area_id_arr: [] as number[],
  language_arr: [] as string[],
  credential_arr: [] as string[],
  tag_arr: [] as string[],
  scenic_id_arr: [] as number[],
  guide_height: "",
  guide_weight: "",
  guider_tips: "",
  good_at: "",
});

const infoData = reactive({
  area_name_arr: [] as string[],
  scenic_name_arr: [] as string[],
});

const avatarClick = () => {
  chooseMedia({ count: 1, mediaType: ["image"] }, (resp) => {
    // Toast.showLoading();
    // upload_up(resp[0].tempFilePath, { type: 1 })
    //   .then((resp) => {
    //     const url = resp[0].url;
    //     return user_update_api({ value: url, type: 2 }).then(() => {
    //       userData.third_img = url;
    //       hideLoading();
    //       userInfoSet({ ...userInfoGet(), ...{ third_img: url } });
    //     });
    //   })
    //   .catch(() => Toast.hideLoading());
  });
};

const nameClick = () => {
  Router.navigateTo("/package/my/pages/guider/name", (resp) => {
    resp.eventChannel.emit("ev-name-data", {
      show_name_type: formData.show_name_type,
      fullname: formData.fullname,
      nickname: formData.nickname,
    });
    resp.eventChannel.once("ev-name-edit", (resp) => {
      if (resp) {
        formData.show_name_type = resp.show_name_type;
        formData.nickname = resp.nickname;
        Router.navigateBack();
      }
    });
  });
};

const phoneClick = () => {
  infoEditForm.value?.show(
    {
      value: formData.emergency_telephone,
      title: "电话",
      inputType: "number",
      placeholder: "请填写电话号码",
      maxLength: 11,
    },
    (value) => (formData.emergency_telephone = value)
  );
};

const areaClick = () => {
  infoMultiplePicker.value?.show(
    {
      pickerList: formData.area_id_arr.map((i, d) => {
        return { id: i, name: infoData.area_name_arr[d] };
      }),
      listData: tempData.areaList,
    },
    (pickerList) => {
      formData.area_id_arr = pickerList.map((i) => i.id);
      infoData.area_name_arr = pickerList.map((i) => i.name);
    }
  );
};

const tagClick = (index: number) => {
  Router.navigateTo("/package/my/pages/guider/tag", (resp) => {
    resp.eventChannel.emit("ev-tag-data", {
      index,
      pickerList: [
        formData.language_arr,
        formData.credential_arr,
        formData.tag_arr,
      ],
      languageList: tempData.languageList,
      certificateList: tempData.certificateList,
      tagList: tempData.tagList,
    });
    resp.eventChannel.once("ev-tag-edit", (resp) => {
      if (resp) {
        formData.language_arr = resp[0];
        formData.credential_arr = resp[1];
        formData.tag_arr = resp[2];
        Router.navigateBack();
      }
    });
  });
};

const scenicClick = () => {
  infoMultiplePicker.value?.show(
    {
      pickerList: formData.scenic_id_arr.map((i, d) => {
        return { id: i, name: infoData.scenic_name_arr[d] };
      }),
      listData: tempData.scenicList,
    },
    (pickerList) => {
      formData.scenic_id_arr = pickerList.map((i) => i.id);
      infoData.scenic_name_arr = pickerList.map((i) => i.name);
    }
  );
};

const heightClick = () => {
  infoEditForm.value?.show(
    {
      value: formData.guide_height,
      title: "身高",
      inputType: "number",
      placeholder: "请填写您的身高",
      maxLength: 3,
      unit: "CM",
    },
    (value) => (formData.guide_height = value)
  );
};

const weightClick = () => {
  infoEditForm.value?.show(
    {
      value: formData.guide_weight,
      title: "体重",
      inputType: "digit",
      placeholder: "请填写您的体重",
      maxLength: 4,
      unit: "KG",
    },
    (value) => (formData.guide_weight = value)
  );
};

const introClick = () => {
  Router.navigateTo("/package/my/pages/guider/intro", (resp) => {
    resp.eventChannel.emit("ev-intro-data", {
      title: "个人介绍",
      value: formData.guider_tips || "",
      placeholder: "请填写个人介绍",
    });
    resp.eventChannel.once("ev-intro-edit", (resp) => {
      if (resp) {
        formData.guider_tips = resp;
        Router.navigateBack();
      }
    });
  });
};

const goodClick = () => {
  Router.navigateTo("/package/my/pages/guider/intro", (resp) => {
    resp.eventChannel.emit("ev-intro-data", {
      title: "擅长",
      value: formData.good_at,
      placeholder: "请填写擅长",
    });
    resp.eventChannel.once("ev-intro-edit", (resp) => {
      if (resp) {
        formData.good_at = resp;
        Router.navigateBack();
      }
    });
  });
};

const saveClick = () => {
  Toast.showLoading();
  edit_api(toRaw(formData))
    .then(() => {
      Toast.hideLoading();
      eventChannel?.emit("ev-info-edit", "edit");
    })
    .catch(() => Toast.hideLoading());
};

let eventChannel: UniApp.EventChannel | undefined = undefined;
const infoEditForm = ref<InstanceType<typeof InfoEditForm>>();
const infoMultiplePicker = ref<InstanceType<typeof InfoMultiplePicker>>();
const tempData = {
  areaList: [] as any[],
  languageList: [] as any[],
  certificateList: [] as any[],
  tagList: [] as any[],
  scenicList: [] as any[],
};
</script>

<template>
  <view class="info-data">
    <view class="info-data-item">
      <view class="info-data-label">头像</view>
      <image
        class="info-data-img"
        :src="formData.avatar_url"
        mode="aspectFill"
        @click="avatarClick"
      />
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <view class="info-data-item" @click="nameClick">
      <view class="info-data-label">对外展示名字</view>
      <view class="info-data-value">
        {{
          formData.show_name_type === 1 ? formData.fullname : formData.nickname
        }}
      </view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <view class="info-data-item" @click="phoneClick">
      <view class="info-data-label">紧急联系方式</view>
      <view class="info-data-value">{{ formData.emergency_telephone }}</view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <view class="info-data-item" @click="areaClick">
      <view class="info-data-label">服务地区</view>
      <view class="info-data-value">
        {{ infoData.area_name_arr.join("、") }}
      </view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <view class="info-data-item" @click="tagClick(0)">
      <view class="info-data-label">擅长语言</view>
      <view class="info-data-value">
        {{ formData.language_arr.join("、") }}
      </view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <view class="info-data-item" @click="tagClick(1)">
      <view class="info-data-label">证书职称</view>
      <view class="info-data-value">
        {{ formData.credential_arr.join("、") }}
      </view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <view class="info-data-item" @click="tagClick(2)">
      <view class="info-data-label">可提供服务</view>
      <view class="info-data-value">
        {{ formData.tag_arr.join("、") }}
      </view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <view class="info-data-item" @click="scenicClick">
      <view class="info-data-label">擅长讲解的景/博</view>
      <view class="info-data-value">
        {{ infoData.scenic_name_arr.join("、") }}
      </view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <view class="info-data-item" @click="heightClick">
      <view class="info-data-label">身高</view>
      <view class="info-data-value">{{ formData.guide_height }}CM</view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <view class="info-data-item" @click="weightClick">
      <view class="info-data-label">体重</view>
      <view class="info-data-value">{{ formData.guide_weight }}KG</view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <view class="info-data-item" @click="introClick">
      <view class="info-data-label">个人介绍</view>
      <view class="info-data-value">{{ formData.guider_tips }}</view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view>
    <!-- <view class="info-data-item" @click="goodClick">
      <view class="info-data-label">擅长</view>
      <view class="info-data-value">{{ formData.good_at }}</view>
      <image
        class="info-data-arrow"
        src="@/package/my/static/guider-info-arrow.png"
      />
    </view> -->
  </view>

  <view class="info-btn">
    <view @click="saveClick">
      <FormButton>保存</FormButton>
    </view>
  </view>

  <InfoEditForm ref="infoEditForm" />
  <InfoMultiplePicker ref="infoMultiplePicker" />
</template>

<style lang="scss">
page {
  padding-top: 10rpx;
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
}

.info-data {
  margin: 0 30rpx 40rpx;

  .info-data-item {
    display: flex;
    align-items: center;
    height: 98rpx;
    border-bottom: 2rpx solid #dddddd;
  }

  .info-data-label,
  .info-data-value {
    font-size: 28rpx;
    color: #666666;
  }

  .info-data-label {
    flex-shrink: 0;
  }

  .info-data-img {
    width: 76rpx;
    height: 76rpx;
    margin-left: auto;
    border-radius: 50%;
  }

  .info-data-value {
    flex-grow: 1;
    min-width: 0;
    color: #333333;
    margin-left: 20rpx;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .info-data-arrow {
    width: 24rpx;
    height: 24rpx;
    margin-left: 20rpx;
  }
}

.info-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 106rpx;
  padding: 14rpx 60rpx env(safe-area-inset-bottom);
  background-color: #ffffff;
}
</style>